<template>
  <div class="my-contests-container">
    <!-- Loading 效果 -->
    <div v-if="loading" class="loading-overlay">
      <a-spin :size="50" />
    </div>

    <div class="page-header">
      <h2 class="page-title">我的竞赛</h2>
      <div class="header-actions">
        <a-radio-group type="button" v-model="activeTab">
          <a-radio value="joined">已参加</a-radio>
          <a-radio value="created">已创建</a-radio>
        </a-radio-group>
      </div>
    </div>

    <!-- 竞赛列表 -->
    <div class="contests-grid">
      <a-row :gutter="[20, 20]">
        <a-col :span="8" v-for="contest in displayContests" :key="contest.id">
          <a-card class="contest-card" :bordered="false">
            <div class="contest-image">
              <img
                :src="
                  contest.userAvatar || require('@/assets/创建编程竞赛封面.png')
                "
                alt="contest image"
              />
              <div
                class="contest-status"
                :class="getStatusClass(contest.status)"
              >
                {{ contest.status }}
              </div>
            </div>

            <div class="contest-content">
              <h3 class="contest-title">{{ contest.title }}</h3>

              <div class="contest-info">
                <div class="info-item">
                  <icon-calendar />
                  <span
                    >开始时间：{{ formatDate(contest.beginTime || "") }}</span
                  >
                </div>
                <div class="info-item">
                  <icon-clock-circle />
                  <span>持续时间：{{ contest.competeTime || 0 }}分钟</span>
                </div>
                <div class="info-item">
                  <icon-team />
                  <span>限制人数：{{ contest.participantLimit || 0 }}人</span>
                </div>
                <div class="info-item">
                  <icon-user />
                  <span>创建者：{{ contest.creatorName || "未知" }}</span>
                </div>
              </div>

              <div class="contest-footer">
                <div class="score-info" v-if="activeTab === 'joined'">
                  <span class="score-label">得分</span>
                  <span class="score-value">{{ contest.score || 0 }}</span>
                </div>
                <a-button
                  type="primary"
                  @click="handleContestAction(contest)"
                  :class="{
                    'action-btn': true,
                    completed: contest.status === '已结束',
                  }"
                >
                  {{ getActionButtonText(contest) }}
                </a-button>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 空状态 -->
    <div v-if="!loading && displayContests.length === 0" class="empty-state">
      <icon-empty />
      <p>暂无{{ activeTab === "joined" ? "参与" : "创建" }}的竞赛</p>
      <a-button
        type="primary"
        @click="handleCreateContest"
        v-if="activeTab === 'created'"
      >
        创建竞赛
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";
import { formatDate } from "@/utils/dateUtil";
import { CompetitionControllerService } from "../../../generatedCom/services/CompetitionControllerService";
import {
  IconCalendar,
  // IconClockCircle,
  // IconTeam,
  IconUser,
} from "@arco-design/web-vue/es/icon";

const router = useRouter();
const loading = ref(true);
const activeTab = ref("joined");

// interface Contest {
//   id: number;
//   coverUrl?: string;
//   status: string;
//   title: string;
//   startTime: string;
//   duration: number;
//   participantCount: number;
//   participantLimit: number;
//   userScore?: number;
// }

const joinedContests = ref<any[]>([]);
const createdContests = ref<any[]>([]);
// 计算当前显示的竞赛列表
const displayContests = computed(() => {
  return activeTab.value === "joined"
    ? joinedContests.value
    : createdContests.value;
});

// 获取状态样式类
const getStatusClass = (status: string) => {
  switch (status) {
    case "进行中":
      return "status-ongoing";
    case "已结束":
      return "status-ended";
    default:
      return "status-upcoming";
  }
};

// 获取按钮文本
const getActionButtonText = (contest: any) => {
  if (activeTab.value === "created") {
    return "查看详情";
  }
  switch (contest.status) {
    case "未开始":
      return "等待开始";
    case "进行中":
      return "立即参与";
    case "已结束":
      return "查看结果";
    default:
      return "查看详情";
  }
};

// 处理竞赛操作
const handleContestAction = (contest: any) => {
  if (activeTab.value === "created") {
    router.push(`/contest/detail/${contest.id}`);
  } else {
    if (contest.status === "进行中") {
      router.push(`/contest/participate/${contest.id}`);
    } else {
      router.push(`/contest/result/${contest.id}`);
    }
  }
};

// 创建竞赛
const handleCreateContest = () => {
  router.push("/contest/create");
};

// 获取竞赛数据
const fetchContests = async () => {
  try {
    loading.value = true;
    // 获取参与的竞赛

    const joinedRes =
      await CompetitionControllerService.loadParticipatedCompetitionUsingPost();
    joinedContests.value = joinedRes.data || [];

    // 获取创建的竞赛
    const createdRes =
      await CompetitionControllerService.loadCreatedCompetitionUsingPost();
    createdContests.value = createdRes.data || [];
  } catch (error) {
    Message.error("获取竞赛数据失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchContests();
});
</script>

<style scoped>
.my-contests-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-1);
  margin: 0;
}

.contests-grid {
  margin-top: 24px;
}

.contest-card {
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-2);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.contest-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.contest-image {
  position: relative;
  height: 160px;
  background: var(--color-fill-2);
  overflow: hidden;
}

.contest-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.contest-card:hover .contest-image img {
  transform: scale(1.05);
}

.contest-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.status-ongoing {
  background: var(--color-success-light-1);
  color: var(--color-success-dark-2);
}

.status-ended {
  background: var(--color-error-dark-2);
  color: var(--color-error-dark-2);
}

.status-upcoming {
  background: var(--color-primary-light-1);
  color: var(--color-primary-dark-2);
}

.contest-content {
  padding: 20px;
}

.contest-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1);
  margin-bottom: 16px;
}

.contest-info {
  margin: 16px 0;
  padding: 16px;
  background: var(--color-fill-1);
  border-radius: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: var(--color-text-2);
  font-size: 14px;
}

.info-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border-2);
}

.info-item .arco-icon {
  font-size: 16px;
  color: var(--color-text-3);
}

.contest-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score-info {
  background: var(--color-success-light-1);
  padding: 6px 12px;
  border-radius: 4px;
}

.score-value {
  color: var(--color-success-6);
  font-weight: 600;
  font-size: 16px;
}

.action-btn {
  min-width: 100px;
}

.action-btn.completed {
  background: var(--color-neutral-4);
  border-color: var(--color-neutral-4);
}

.empty-state {
  text-align: center;
  padding: 48px 0;
  color: var(--color-text-3);
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .my-contests-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .contests-grid {
    margin-top: 16px;
  }
}
</style>
